<template>
  <div>
    <el-row style="margin-top: 10px">
      <el-button split-button type="primary" size="small" @click="handleCreate">添加教室信息</el-button>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-table
          :data="list"
          :height="tableHeight"
          style="width: 100%"
          v-loading="loading"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="50">
        </el-table-column>
        <el-table-column
            label="教室编码"
            prop="classroomCode"
            align="center"
            width="110">
        </el-table-column>
        <el-table-column
            label="教室名称"
            prop="classroomName"
            align="center"
            width="110">
        </el-table-column>
        <el-table-column
            label="人数"
            prop="capacity"
            align="center"
            width="50">
        </el-table-column>
        <el-table-column
            label="所在位置"
            prop="location"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.location === 1">笃行楼</span>
            <span v-if="scope.row.location === 2">知行楼</span>
            <span v-if="scope.row.location === 3">敏行楼</span>
            <span v-if="scope.row.location === 4">躬行楼</span>
          </template>
        </el-table-column>
        <el-table-column
            label="所在楼层"
            prop="floor"
            width="80"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.floor === 1">1层</span>
            <span v-if="scope.row.floor === 2">2层</span>
            <span v-if="scope.row.floor === 3">3层</span>
            <span v-if="scope.row.floor === 4">4层</span>
          </template>
        </el-table-column>
        <el-table-column
            label="使用模式"
            prop="usageMode"
            align="center"
            width="100">
          <template slot-scope="scope">
            <span  v-if="scope.row.usageMode === 1">课堂模式</span>
            <span   v-if="scope.row.usageMode === 2">活动室模式</span>
          </template>
        </el-table-column>
        <el-table-column
            label="使用状态"
            prop="usageStatus"
            align="center">
          <template slot-scope="scope">
            <el-tag type="primary" v-if="scope.row.usageStatus === 1">空闲</el-tag>
            <el-tag type="success" v-if="scope.row.usageStatus === 2">使用中</el-tag>
            <el-tag type="info"    v-if="scope.row.usageStatus === 3">关闭</el-tag>
            <el-tag type="warning" v-if="scope.row.usageStatus === 4">故障</el-tag>
        </template>
        </el-table-column>
        <el-table-column
            label="创建时间"
            prop="createTime"
            width="160"
            align="center"
            :formatter="formatDate">
        </el-table-column>
        <el-table-column
            width="160"
            label="操作方式"
            align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="small" @click="handleEdit(scope.row.id)">编辑</el-button>
            <el-button type="danger" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handlePageChange"
          :current-page="this.pagination.page"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="this.pagination.pageSize"
          layout="total, sizes, prev, pager, next"
          :total="this.pagination.total">
      </el-pagination>
    </el-row>
    <!-- 对话框 -->
    <classroom-edit-dialog :visible.sync="classroomEditDialogVisible" :id.sync="currentClassroomId"></classroom-edit-dialog>
  </div>

</template>

<script>
import {deleteClassroomById, listClassrooms} from "@/api/classroom";
import ClassroomEditDialog from "./components/ClassroomListEditDialog";
import Formatter from "../../utils/formatter";

export default {
  name: "ClassroomList",
  components: {ClassroomEditDialog},
  data() {
    return {
      tableHeight: window.innerHeight - 179,  // 计算表格高度
      classroomEditDialogVisible: false,  // 是否显示设备添加对话框
      classroomBindDialogVisible: false,
      currentClassroomId: '',  // 当前选中设备ID
      list: [],  // 列表数据
      pagination: {
        page: 0,
        pageSize: 10,
        total: 0
      },  // 分页信息
      multipleSelection: [],
      loading: true
    }
  },
  created: function () {
    this.fetchData()
  },
  methods: {

    // 获得数据
    fetchData() {
      listClassrooms(1, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 弹出创建设备信息对话框
    handleCreate() {
      this.currentClassroomId = ''
      this.classroomEditDialogVisible = true
    },

    // 弹出编辑设备信息对话框
    handleEdit(id) {
      this.classroomEditDialogVisible = true;
      this.currentClassroomId = id + ''
    },

    // 删除指定信息记录
    handleDelete(id) {
      deleteClassroomById(id).then((response) => {
        if (response.data.code === 200) {
          this.fetchData();
        } else {
          this.$alert('删除失败', '提示', {
            confirmButtonText: '确定'
          })
        }
      });
    },


    // 改变每页条数刷新数据
    handleSizeChange(pageSize) {
      listClassrooms(1, pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 翻页刷新数据
    handlePageChange(page) {
      listClassrooms(page, this.pagination.pageSize).then((response) => {
        this.list = response.data.data.list
        this.pagination = response.data.data.pagination
        this.loading = false
      })
    },

    // 多选记录
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    // 格式化日期字段
    formatDate: function (row) {
      if (!row.createTime) {
        console.warn('缺少createTime字段值')
        return ''
      }
      return Formatter.formatDate(row.createTime,'YYYY-MM-DD')
    }
  }
}
</script>

<style scoped>

</style>